<template>
  <view>
    <swiper
      class="rights-swiper"
      previous-margin="120rpx"
      next-margin="120rpx"
      :current="current"
      @change="handleChange"
    >
      <swiper-item
        class="rights-swiper-item"
        v-for="level in rightLevels"
        :key="level.levelType"
      >
        <view
          class="rights-swiper-item-card"
          :class="{ active: current === level.levelType - 1 }"
        >
          <image
            class="rights-swiper-item-card-bg"
            :src="rightSwiperItemCardBg(level)"
          />
          <view class="rights-swiper-item-card-content">
            <view
              v-if="userInfo.customerLevel > level.levelType"
              class="text-white text-base text-sm"
            >
              您已超越该等级~
            </view>
            <template v-else-if="userInfo.customerLevel == level.levelType">
              <view class="w-full d-flex justify-between mb-sm">
                <text>甜蜜值</text>
                <text>
                  {{ userInfo.growthValue }}/{{ level.growthValueMax }}
                </text>
              </view>
              <view class="rights-swiper-item-card-progress">
                <view
                  class="rights-swiper-item-card-progress-value"
                  :style="{ width: processPercentage(level.growthValueMax) }"
                ></view>
              </view>
              <view class="text-sm mt-base">
                {{ processNextLevelTxt(level) }}
              </view>
            </template>
            <view v-else>
              {{ highLevelTxt(level) }}
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="light-section">
      <image
        class="light-section-img"
        :src="lightRingImg"
      />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "RightCards",
  props: {
    rightLevels: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    processPercentage() {
      return max => {
        return (this.userInfo.growthValue / max) * 100 + "%"
      }
    },
    rightSwiperItemCardBg() {
      return level =>
        `/pages/customer-center/static/rights/card_${level.levelType}.png`
    },
    processNextLevelTxt() {
      return level => {
        return `再升一级可享【${level.nextLevelTxt}】等${level.nextLevelRightsNum}项权益`
      }
    },
    highLevelTxt() {
      return level => {
        return `累计${level.growthValueMin}点甜蜜值可升级，享【${level.currentLevelTxt}】等${level.currentLevelRightsNum}项权益`
      }
    },
    lightRingImg() {
      return `/pages/customer-center/static/rights/light_ring_${
        this.current + 1
      }.png`
    }
  },
  methods: {
    handleChange(e) {
      this.$emit("change", e.detail.current)
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-swiper {
  width: 100%;
  height: 610rpx;

  &-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &-card {
      position: relative;
      width: 400rpx;
      height: 567rpx;

      &:not(.active) {
        transform: scale(0.8);
      }

      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      &-content {
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: $uni-font-size-sm;
        padding: 0 50rpx;
      }

      &-progress {
        width: 100%;
        height: 10rpx;
        border-radius: $uni-border-radius-base;
        background-color: #ffd777;

        &-value {
          height: 100%;
          background-color: #ffffff;
          border-radius: $uni-border-radius-base;
        }
      }
    }
  }
}

.light-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &-img {
    width: 750rpx;
    height: 130rpx;
  }
}
</style>
